feat(helper-text): port `<pf-v5-helper-text>` to `<pf-v6-helper-text>` element by adamjohnson · Pull Request #3155 · patternfly/patternfly-elements

adamjohnson · 2026-05-20T17:54:20Z

Summary

Removes <pf-v5-helper-text>
Ports <pf-v5-helper-text> to <pf-v6-helper-text> web component for PatternFly v6
Displays contextual feedback or validation messages for form fields
Supports variant (default/indeterminate/warning/success/error), has-icon, dynamic, and screen-reader-text attributes
Built-in SVG icons from @patternfly/react-icons (rh-ui-minus, rh-ui-warning-fill, rh-ui-check-circle-fill, rh-ui-error-fill)
Dark mode support via light-dark() CSS fallbacks
Demos: basic (index), with-custom-icons, multiple, dynamic

Closes #3012

Intentional divergences from React

Single element instead of React's HelperText (container) + HelperTextItem (item) pair; use plain HTML wrappers with aria-live for grouping
has-icon attribute for opt-in icon display (React auto-shows icons for non-default variants)
icon slot replaces React's icon prop (ReactNode → slotted markup)
screen-reader-text attribute maps to React's screenReaderText prop
dynamic attribute exposes React's internal .pf-m-dynamic CSS modifier class
Container props (component, isLiveRegion, aria-label) not implemented; users apply these directly on wrapper elements
No dependency on <pf-v5-icon> — uses inline SVG icons

Test plan

npm run test passes
Demos render correctly at localhost:8000
All variant styles (colors, font weight, icons) visually match patternfly.org
Dark mode colors correct when switching color scheme
Screen reader text announces variant status for non-default variants
Custom screen-reader-text overrides default announcement
Empty screen-reader-text="" suppresses announcement
Custom icon slot displays slotted SVG in place of default icon
Dynamic demo shows aria-live container with mixed success/error items

Assisted-By: Claude

changeset-bot · 2026-05-20T17:54:25Z

🦋 Changeset detected

Latest commit: 40c4af1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/elements	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-05-20T17:56:06Z

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(helper-text): port `<pf-v5-helper-text>` to `<pf-v6-helper-text>` element"
}

github-actions · 2026-05-20T17:56:23Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`19cb63e`
😎 Deploy Preview	https://deploy-preview-3155--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2026-05-20T20:23:24Z

SSR Test Run for 7f5d1f9: Report

…attr

github-actions · 2026-06-01T21:37:09Z

SSR Test Run for 7646863: Report

bennypowers · 2026-06-08T13:52:25Z

+
+| React prop | Notes |
+| --- | --- |
+| `HelperText` `component` (`'div'` \| `'ul'`) | Use a standard HTML `<div>` or `<ul>` wrapper instead. |


on second thought, let's just tell people to use a ul with some css.

rename multiple.html to multiple-items.html and have it use <ul><li> and some pf tokens for the spacing.

<pf-v6-progress> <ul slot="helper-text"> <li><pf-v6-helper-text>some text

how would that work if we implement #3152 (comment) (adding all elements in helper-text to ariaDescribedByElements on progress host). i.e. is ul allowed as a describedby element?

@hellogreg NB: we'll need to test that this actually works with various SR vendors. We'll ping here when it's ready for testing

bennypowers · 2026-06-08T13:52:42Z

+| React prop | Notes |
+| --- | --- |
+| `HelperText` `component` (`'div'` \| `'ul'`) | Use a standard HTML `<div>` or `<ul>` wrapper instead. |
+| `HelperText` `isLiveRegion` | Apply `role="status"` directly on a wrapper element. |


github-actions · 2026-06-15T16:02:48Z

SSR Test Run for 19cb63e: Report

adamjohnson added 5 commits May 20, 2026 13:50

feat(helper-text): add <pf-v6-helper-text> element

1db57ef

chore(helper-text): remove <pf-v5-helper-text> directory and files

4c47d71

test(helper-text): add tests

e3df388

docs(helper-text): use <pf-v6-helper-text> in docs

3b3815d

chore(helper-text): add changeset

205eb07

adamjohnson added this to the PatternFly Elements 6 milestone May 20, 2026

adamjohnson self-assigned this May 20, 2026

adamjohnson added this to PatternFly Issues May 20, 2026

github-project-automation Bot moved this to Needs triage in PatternFly Issues May 20, 2026

adamjohnson changed the title ~~Feat/v6 helper text~~ feat(helper-text): port <pf-v5-helper-text> to <pf-v6-helper-text> element May 20, 2026

github-actions Bot added the AT passed Automated testing has passed label May 20, 2026

adamjohnson moved this from Needs triage to PR Review in PatternFly Issues May 20, 2026

This comment has been minimized.

Sign in to view

adamjohnson linked an issue May 20, 2026 that may be closed by this pull request

[feat]: Update <pf-v6-helper-text> for PatternFly v6 #3012

Open

18 tasks

adamjohnson requested review from bennypowers and zeroedin May 20, 2026 18:03

adamjohnson marked this pull request as ready for review May 20, 2026 18:03

adamjohnson removed the AT passed Automated testing has passed label May 20, 2026

github-actions Bot added the AT passed Automated testing has passed label May 20, 2026

docs(helper-text): add form validation demo

09fb554

bennypowers requested changes May 27, 2026

View reviewed changes

Comment thread elements/pf-v6-helper-text/demo/dynamic.html Outdated

Comment thread elements/pf-v6-helper-text/demo/with-custom-icons.html Outdated

Comment thread elements/pf-v6-helper-text/README.md Outdated

Comment thread elements/pf-v6-helper-text/pf-v6-helper-text.ts Outdated

adamjohnson added 5 commits June 1, 2026 16:23

fix(helper-text): use accessible-label vs screen-reader-text for …

6082831

…attr

test(helper-text): update tests to use accessible-label

fda184b

docs(helper-text): "Not implemented" renamed to "Changed" in README

a017047

docs(helper-text): use pf-v5-icon in custom icons demo

56a1556

fix(helper-text): remove hasIcon property

03c28ee

adamjohnson requested a review from bennypowers June 1, 2026 21:35

adamjohnson mentioned this pull request Jun 2, 2026

feat(banner)!: port to pf-v6-banner #3143

Merged

7 tasks

bennypowers requested changes Jun 8, 2026

View reviewed changes

Merge branch 'staging/pfv6' into feat/v6-helper-text

40c4af1

	\| `HelperText` `component` (`'div'` \\| `'ul'`) \| Use a standard HTML `<div>` or `<ul>` wrapper instead. \|
	\| `HelperText` `component` (`'div'` \\| `'ul'`) \| Use a standard HTML `<ul>` wrapper if necessary. \|

	\| `HelperText` `isLiveRegion` \| Apply `role="status"` directly on a wrapper element. \|
	\| `HelperText` `isLiveRegion` \| Apply `role="status"` directly on the element, or a `<ul>` wrapper, if in use. \|

Conversation

adamjohnson commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Intentional divergences from React

Test plan

Uh oh!

changeset-bot Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Commitlint tests passed!

Uh oh!

github-actions Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

This comment has been minimized.

github-actions Bot commented May 20, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 1, 2026

Uh oh!

bennypowers Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

bennypowers Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

bennypowers Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bennypowers Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

bennypowers Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

adamjohnson commented May 20, 2026 •

edited

Loading

changeset-bot Bot commented May 20, 2026 •

edited

Loading

github-actions Bot commented May 20, 2026 •

edited

Loading

github-actions Bot commented May 20, 2026 •

edited

Loading

bennypowers Jun 15, 2026 •

edited

Loading